<template>
	<view class="content">
		<view class="cd-saerch-area">
			<u-search placeholder="请输入搜索关键词" @focus="changeSearch(true)"></u-search>
		</view>


		<!-- 搜索组件 -->
		<search></search>

		<!-- 轮播图 -->
		<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true">
			<swiper-item class="swiper-item" v-for="(item, index) in banner" :key="item.id">
				<image class="swiper-item-img" :src="item.image_url" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<!-- 频道: 宫格是有图标有标题 -->
		<u-grid :border="true" col="5">
			<u-grid-item v-for="(listItem, listIndex) in channel" :key="listIndex">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.icon_url" :size="22"></u-icon>
				<text class="grid-text">{{ listItem.name }}</text>
			</u-grid-item>
		</u-grid>

		<!-- 品牌区域 -->
		<view class="cd-brand-area">
			<view class="cd-big-title">品牌制造商直供</view>

			<view class="cd-brand-content">
				<view class="cd-brand-item" v-for="item in brandList" :key="item.id">
					<view class="cd-brand-item-name">{{ item.name }}</view>
					<view class="cd-brand-item-price">{{ item.floor_price | priceFormat }}</view>
					<image class="cd-brand-item-img" :src="item.pic_url" mode="widthFix" />
				</view>
			</view>
		</view>

		<!-- 新品发布 -->
		<view class="cd-newgoods-area">
			<view class="cd-big-title">周一周四•新品首发</view>

			<cd-goods-list :goodsList="newGoodsList"></cd-goods-list>
		</view>

		<!-- 人气推荐 -->
		<view class="cd-recommend-area">
			<view class="cd-big-title">人气推荐</view>

			<view class="cd-recommend-item" v-for="item in hotGoodsList" :key="item.id">

				<view class="cd-recommend-item-img-box">
					<image class="cd-recommend-item-img" :src="item.list_pic_url" mode="widthFix"></image>
				</view>
				<view class="cd-recommend-item-info-box">
					<view class="cd-recommend-item-info-title">{{ item.name }}</view>
					<view class="cd-recommend-item-info-subtitle">{{ item.goods_brief }}</view>
					<view class="cd-recommend-item-info-price">{{ item.retail_price | priceFormat }}</view>
				</view>
			</view>
		</view>


		<!-- 专题精选 -->
		<view class="cd-topic-area">
			<view class="cd-big-title">专题精选</view>

			<cd-scroll-list :indicator="false">
				<view class="cd-topic-item" v-for="item in topicList" :key="item.id">
					<image :src="item.scene_pic_url" class="cd-topic-item-img" mode="aspectFill"></image>
					<view class="cd-topic-item-title">
						{{ item.title }}
						<text class="cd-topic-item-title-price">{{ item.price_info | priceFormat }}</text>
					</view>
					<view class="cd-topic-item-subtitle">{{ item.subtitle }}</view>
				</view>
			</cd-scroll-list>
		</view>

		<view class="cd-category-list-area">
			<view class="cd-category-list-item-area" v-for="(categoryItem, index) in categoryList" :key="index">
				<view class="cd-big-title">{{ categoryItem.name }}</view>

				<cd-goods-list :goodsList="categoryItem.goodsList"></cd-goods-list>
			</view>
		</view>

		<!-- 这是进入页面的加载组件 -->
		<!-- <toast></toast> -->



		<customTabBar></customTabBar>
	</view>

</template>

<script>
	import customTabBar from '@/custom-tab-bar/index.vue';
	// import toast from "@/components/cd-toast/cd-toast.vue"
	import {
		ApiGetHomeData
	} from '@/utils/api.js';
	import cdScrollList from '@/components/cd-scroll-list/cd-scroll-list.vue';
	import cdGoodsList from '@/components/cd-goods-list/cd-goods-list.vue';
	import search from '@/components/searchComp/searchComp.vue';
	import {
		mapState,
		mapMutations
	}
	from "vuex"

	export default {
		components: {
			customTabBar,
			'cd-scroll-list': cdScrollList,
			'cd-goods-list': cdGoodsList,
			search,
			// toast,
		},
		data() {
			return {
				banner: [],
				channel: [],
				brandList: [],
				newGoodsList: [],
				hotGoodsList: [],
				topicList: [],
				categoryList: [],
			};
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
			...mapState({
				show: state => state.search.show
			})
		},
		methods: {
			...mapMutations({
				changeSearch: 'search/changeSearch'
			})
		},

		async onLoad() {
			let res = await ApiGetHomeData();
			let {
				banner,
				channel,
				brandList,
				newGoodsList,
				hotGoodsList,
				topicList,
				categoryList
			} = res.data;

			this.banner = banner; // 轮播图
			this.channel = channel; // 频道
			this.brandList = brandList; // 品牌制造商
			this.newGoodsList = newGoodsList; // 新品首发
			this.hotGoodsList = hotGoodsList; // 人气推荐
			this.topicList = topicList; // 专题精选
			this.categoryList = categoryList;
			// console.log('123666666', res);
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 0);
			console.log(this.newGoodsList);
		},
		onReady() {

			// this.showToast(this.list[0])
		}
	};
</script>

<style lang="scss">
	.content {
		background-color: #efefef;
		padding-bottom: 100px;
	}

	.cd-saerch-area {
		padding: 10px 12px;
		// height: 108rpx;
		background-color: white;
	}

	// 轮播图
	.swiper {
		--width: 750rpx;
		--height: 400rpx;
		width: var(--width);
		height: var(--height);

		.swiper-item {
			width: var(--width);
			height: var(--height);

			.swiper-item-img {
				width: var(--width);
				height: var(--height);
			}
		}
	}

	// 频道
	.u-grid {
		background-color: white;

		.u-border-right {
			border-right: 1px solid #f7f8f9;
			height: 140rpx;
		}

		.u-grid-item {
			.grid-text {
				font-size: 24rpx;
				margin-top: 23rpx;
			}
		}
	}

	// alt 加 键盘上的上下按键可以移动代码

	// 大标题
	.cd-big-title {
		height: 100rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	// 品牌
	.cd-brand-area {
		margin-top: 42rpx;
		background-color: white;

		.cd-brand-content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 236rpx 236rpx;
			gap: 15rpx;

			// 具体项目
			.cd-brand-item {
				position: relative;

				// 名称
				.cd-brand-item-name {
					position: absolute;
					z-index: 1;
					top: 24rpx;
					left: 24rpx;
					font-size: 25rpx;
				}

				// 价格
				.cd-brand-item-price {
					position: absolute;
					z-index: 1;
					top: 85rpx;
					left: 24rpx;
					color: var(--price-color);
					font-size: 24rpx;
				}

				// 图片
				.cd-brand-item-img {
					width: 100%;
				}
			}
		}
	}

	// 新品首发
	.cd-newgoods-area {
		margin-top: 45rpx;
		background-color: white;
	}

	// 人气推荐
	.cd-recommend-area {
		background-color: white;
		margin-top: 20rpx;

		// 推荐项
		.cd-recommend-item {
			height: 213rpx;
			background-color: #fafafa;
			margin-bottom: 17rpx;
			display: flex;

			.cd-recommend-item-img-box {
				// background-color: red;
				flex: 1;
				max-width: 228rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.cd-recommend-item-img {
					width: 90%;
				}
			}

			// 推荐信息盒子
			.cd-recommend-item-info-box {
				// background-color: blue;
				flex: 1;

				// 推荐标题
				.cd-recommend-item-info-title {
					margin-top: 29rpx;
					font-size: 35rpx;
					height: 35rpx;
				}

				// 推荐子标题
				.cd-recommend-item-info-subtitle {
					margin-top: 43rpx;
					font-size: 24rpx;
					height: 24rpx;
				}

				// 推荐价格
				.cd-recommend-item-info-price {
					margin-top: 40rpx;
					font-size: 20rpx;
					height: 20rpx;
					color: var(--price-color);
				}
			}
		}
	}

	.cd-topic-area {
		margin-top: 40rpx;
		background-color: white;

		.cd-topic-item {
			margin-right: 15rpx;
			// background-color: cadetblue;
			width: 600rpx;
			height: 530rpx;

			.cd-topic-item-img {
				width: 600rpx;
				height: 400rpx;
				display: block;
			}

			.cd-topic-item-title {
				font-size: 32rpx;
				// height: 32rpx;
				margin-top: 27rpx;
				width: 80%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.cd-topic-item-title-price {
					color: var(--price-color);
				}
			}

			.cd-topic-item-subtitle {
				font-size: 27rpx;
				height: 27rpx;
				margin-top: 27rpx;
			}
		}
	}

	.cd-category-list-area {
		background-color: white;
		margin-top: 28rpx;
	}
</style>
